<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Datatable Tests</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css">
<script type="text/javascript" src="../../../build/yui/yui.js"></script>

<style>
    html {
        font-family: sans-serif;
        font-size: smaller;
    }
    form {
        position: absolute;
        left: 300px;
        top: 30px;
        border: 1px solid black;
        padding: 20px;
    }
    form ul {
        margin: 0;
        padding: 0;
    }
    form li {
        list-style: none;
        white-space: nowrap;
    }
    form label {
        display: inline-block;
        width: 220px;
        text-align: right;
    }

    .yui3-datatable {
        margin: 20px;
    }
    .form-add #btn_add {
        display: block;
    }
    .form-add #btn_update,
    .form-add #btn_delete {
        display: none;
    }
    .form-update #btn_add {
        display: none;
    }
    .form-update #btn_update,
    .form-update #btn_delete {
        display: block;
    }
</style>
</head>

<body class="yui3-skin-sam">
<h1>Datatable Tests</h1>
<button id="btn_color">Color Cells</button>
<form class="form-add">
    <fieldset>
        <select>
            <option value="add">Select Row</option>
        </select>
    </fieldset>
    <ul>
        <li><label>Id: <input id="row_id"></label></li>
        <li><label>Name: <input id="row_name"></label></li>
        <li><label>Qty: <input id="row_qty"></label></li>
    </ul>
    <button id="btn_add">Add Row</button>
    <button id="btn_update">Update</button>
    <button id="btn_delete">Delete</button>
</form>
<div id="table"></div>


<script type="text/javascript">
YUI({
    filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw',
    combine: false,
    allowRollup: false
}).use("datatable", function(Y) {

    var table = new Y.DataTable({
        columns: [
            { key:'aid', label: 'id'},
            'name',
            'qty',
            { key: 'mod', label: 'mod', formatter: function(o) {
                var rec = o.record;
                return rec.get('qty') + ' ' + rec.get('name').toLowerCase();
            }}
        ],
        data: [
            { aid: 1, name: 'Apple', qty: 10 },
            { aid: 2, name: 'Banana', qty: 10 },
            { aid: 3, name: 'Carrot', qty: 10 },
            { aid: 4, name: 'Fig', qty: 10 },
            { aid: 5, name: 'Kiwi', qty: 10 },
            { aid: 6, name: 'Pineapple', qty: 10 }
        ]
    });

    table.render('#table');



    var frm = Y.one('form'),
        selectNode = frm.one('select'),
        optionTemplate = '<option value="{clientId}">{aid}: {name}</option>';

    frm.delegate('click', function(e) {
        e.preventDefault();

        var btn = e.currentTarget,
            id = selectNode.get('value'),
            obj = {
                aid: Y.one('#row_id').get('value') || null,
                name: Y.one('#row_name').get('value') || null,
                qty: Y.one('#row_qty').get('value') || null
            };

        if (btn.get('id') === 'btn_add') {
            if (obj.aid && obj.name && obj.qty) {
                table.addRow(obj, { id: 0 });
            }
        } else if (btn.get('id') === 'btn_update') {
            table.modifyRow(id, obj);
        } else if (btn.get('id') === 'btn_delete') {
            table.removeRow(table.getRecord(id));
        }

        updateSelect();
        frm.reset();
        frm.addClass('form-add').removeClass('form-update');
    }, 'button');

    selectNode.on('change', function (e) {
        if (e.currentTarget.get('value') === 'add') {
            frm.reset();
            frm.addClass('form-add').removeClass('form-update');
        } else {
            updateForm();
        }
    });

    table.body.tbodyNode.delegate('click', function (e) {
        var clientId = e.currentTarget.getData('yui3-record');
        selectNode.set('value',  clientId);
        updateForm();
    }, 'tr');

    function updateForm() {
        var id = selectNode.get('value'),
            obj = table.getRecord(id).toJSON();

        frm.one('#row_id').set('value', obj.aid);
        frm.one('#row_name').set('value', obj.name);
        frm.one('#row_qty').set('value', obj.qty);
        frm.addClass('form-update').removeClass('form-add');
    }

    function updateSelect () {
        var options = selectNode.all('option');

        if (options.size() > 1) {
            options.slice(1).remove();
        }

        table.data.each(function (model) {
            selectNode.append(Y.Lang.sub(optionTemplate, Y.mix({
                clientId: model.get('clientId')
            }, model.toJSON())));
        });
    }
    updateSelect();

    Y.one('#btn_color').on('click', function (e) {
        e.preventDefault();
        table.body.tbodyNode.all('td').each(function (td) {
            td.setStyle('backgroundColor', 'green');
        });
    });
});
</script>
</body>
</html>
